<script setup lang="ts">
  import AppIcon from '@/components/common/app/AppIcon.vue';
  import { useLocale } from '@/locales/useLocale';
  import { IUserDropEnum, IUserDropMenu } from '@/components/types';

  const { t } = useLocale();

  const props = withDefaults(
    defineProps<{
      src: string;
      dropMenu: IUserDropMenu[];
    }>(),
    {
      src: '',
      //@ts-ignore
      dropMenu: [] as IUserDropMenu[],
    }
  );

  const emits = defineEmits(['command']);

  const commandFn = (command: IUserDropEnum) => {
    emits('command', command);
  };
</script>

<template>
  <el-dropdown trigger="click" @command="commandFn">
    <div class="h-full flex-justify-items-center ml-5 lg:mr-4">
      <el-avatar :size="35" class="cursor-pointer" :src="src" />
    </div>
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item
          v-for="item in dropMenu"
          :key="item.title"
          :divided="item.divided"
          :command="item.command"
          :disabled="item.disabled"
        >
          <AppIcon :icon="item.icon" />
          <span>{{ t(item.title) }}</span>
        </el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
</template>

<style lang="scss"></style>
